import { _decorator, Component, Node, EventTouch, Vec3, Vec2, UITransform, Camera, EventHandler ,UIOpacity} from 'cc';
const { ccclass, property } = _decorator;

@ccclass('VisualJoyStick')
export class VisualJoyStick extends Component {

  @property({ type: Node, tooltip: '操控杆的控制点' })
  controlDot !: Node;
  @property({ type: Node, tooltip: '操控杆' })
  joystick !: Node;


  @property({
    type: EventHandler
  }) changeEvents: EventHandler[] = []

  movableFlag: boolean = false;
  radian: number = 0;
  speed: number = 150;

  radius: number = 0;
  onLoad() {
    // this.radius = this.node.getComponent(UITransform)!.contentSize.width / 2 - this.controlDot.getComponent(UITransform)!.contentSize.width / 2;
    const maxRange=400
    this.radius = maxRange / 2 - this.controlDot.getComponent(UITransform)!.width / 2;

    this.initTouchEvent();
  }

  initTouchEvent() {
    this.node.on(Node.EventType.TOUCH_START, this.touchStartEvent, this);
    this.node.on(Node.EventType.TOUCH_MOVE, this.touchMoveEvent, this);
    this.node.on(Node.EventType.TOUCH_END, this.touchEndEvent, this);
    this.node.on(Node.EventType.TOUCH_CANCEL, this.touchEndEvent, this);
  }

  touchStartEvent(evt: EventTouch) {
    if (!this.movableFlag) {
      const tempPosVec3 = new Vec3(evt.getUILocation().x, evt.getUILocation().y, 0);
      const uiPos = this.node.parent.getComponent(UITransform).convertToNodeSpaceAR( tempPosVec3)
      this.node.setPosition(uiPos.x, uiPos.y,this.node.position.z)
    }

    const tempPosVec3 = new Vec3(evt.getUILocation().x, evt.getUILocation().y, 0);
    let touchPos: Vec3 = this.node.getComponent(UITransform)!.convertToNodeSpaceAR(tempPosVec3);
    const distance = touchPos.length();

    // 以x轴正方向为基准，计算偏移量
    const tempPosVec2 = new Vec2(touchPos.x, touchPos.y);
    this.radian = new Vec2(1, 0).signAngle(tempPosVec2);
    const offsetX = Math.cos(this.radian) * this.radius;
    const offsetY = Math.sin(this.radian) * this.radius;
    this.setDotPosition(this.radius > distance ? touchPos : new Vec3(offsetX, offsetY, 0));

    this.movableFlag = true;
  }

  touchMoveEvent(evt: EventTouch) {
  
    const tempPosVec3 = new Vec3(evt.getUILocation().x, evt.getUILocation().y, 0);
    let touchPos: Vec3 = this.node.getComponent(UITransform)!.convertToNodeSpaceAR(tempPosVec3);
    const distance = touchPos.length();

    const tempPosVec2 = new Vec2(touchPos.x, touchPos.y);
    this.radian = new Vec2(1, 0).signAngle(tempPosVec2);
    const offsetX = Math.cos(this.radian) * this.radius;
    const offsetY = Math.sin(this.radian) * this.radius;
    this.setDotPosition(this.radius > distance ? touchPos : new Vec3(offsetX, offsetY, 0))
  }

  touchEndEvent() {
    this.movableFlag = false;
    this.setDotPosition(Vec3.ZERO);
  }

  direction: Vec3 = new Vec3()
  setDotPosition(pos: Vec3) {
    this.controlDot.setPosition(pos);
    this.direction.set(pos.x / this.radius, pos.y / this.radius, 0)

    /**返回方向向量和弧度 */
    EventHandler.emitEvents(this.changeEvents, this, { direction: this.direction, radian: this.radian })

  }
  protected update(dt: number): void {
    this.node.getComponent(UIOpacity).opacity = this.movableFlag ? 255 : 0
  }
}